<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/vue.js"></script>
</head>

<body>

    <div id="app">
        <h1>vue</h1>
        <h2> {{count}} </h2>
        <h2 class="msg">msg={{msg}}</h2>
        <h2>flag={{flag?'aa':'cc'}}</h2>
        <h2>{{text}}</h2>
        <h2 v-bind:data-word="word">word={{word}}</h2>
        <p><input type="text" v-model="word"></p>
        <div v-if="flag">
            <img v-bind:src="imgurl" v-bind:alt="text" v-bind:title="msg" style="width: 200px;height:200px;">
        </div>
        <div class="show" v-show="!flag">
            <h2>v-show 也能控制显示和隐藏</h2>
        </div>
        <button v-on:click="flag=!flag">点击切换flag</button>
        <button v-on:click="changeCount">countAdd</button>
        <button v-on:click="changeMsg('00')">修改Msg</button>
        <div>
            <h3 v-for="(item,index) in list" wx:key="index">
                {{item}}--{{index}}
            </h3>
        </div>
        <div>
            <h2>618</h2>
            <p>单价：<input type="number" v-model="price"></p>
            <p>数量：<input type="number" v-model="num"></p>
            <p>小计：{{num*price}}</p>
        </div>
        <div>
            <h3 v-text="word"></h3>
            <h3>{{word}}</h3>
        </div>
        <div>
            {{tag}}
        </div>
        <div v-html="tag"></div>
    </div>


    <script>
        console.log(Vue);

        const vm = new Vue({
            el: "#app",
            data: {
                count: 1000,
                msg: 'wwwww',
                flag: true,
                text: '可接受的付货款未付很多附加上课',
                word: 'lalalalala',
                imgurl: "http://47.104.209.44/base/imgs/1.jpg",
                list: ['vue', 'react', 'node', 'webpack', '小程序'],
                price: 120,
                num: 68,
                tag: "<h2>who are you</h2>"


            },
            methods: {
                changeCount() {
                    this.count++;
                },
                changeMsg(msg) {
                    this.msg = msg;
                }

            }
        })

    </script>
    <!-- 
    Vue 通过实例化 Vue 这个构造函数 实现 vue 框架的所有功能 
    vm  得到的实例化对象  
    el  属性  document.querySelector(el);   说明Vue的作用范围 
    会将app 里面所有的 DOM 渲染 成 虚拟DOM(?)  存储在 内存中 
    data  Vue 需要初始化的数据  最常见的属性    
    {{ }}  最普遍的模板标记标签  双大括号语法  插值表达式  
    核心功能  允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统
    声明式  直接在 html  书写    a
    编程式  直接在 javascript 书写  location.href   
    
    响应式  reaction  数据被修改之后  页面里面随之跟着里面更新 (vue提供自动响应式系统)
    
    强大的指令功能  v-   代替你进行DOM 操作  Attribute  
    v-bind   绑定vue标签 或者 组件的 属性 attribute v-bind:src v-bind:title  绑定动态的属性 
    静态属性  永远不改变 不是变量
    动态属性  接收是变量  (v-bind)  70%
    v-if/v-show  条件渲染  控制显示隐藏  90% 
    v-on 绑定事件  v-on:click  v-on:change v-on:keydown  100% 
    v-for   循环 循环对象 或数组   90%
    v-model  只能绑定在输入框  实现数据双向绑定 (view 视图 + model 数据模型)   90%  
    当你修改 页面的时候  v-model 自动去更新数据层 
    当你修改 数据的时候  v-model 自动去更新视图层 
    
    v-text   textContent   只接受文本
    v-html   innerHTML     文本和html标签 
    v-once   read-only     
    methods vue 属性  接收方法 
    
    组件化 组件系统是 Vue 的另一个重要概念 
    允许我们使用小型、独立和通常可复用的组件构建大型应用 
    
    封装 类似 Vue 实现数据的双向绑定  双大括号语法 
-->
</body>

</html>